<template>
  <n-card>
    <div class="main-container">
      <n-form
          ref="formRef"
          :model="formValue"
          :rules="rules"
          :size="'medium'"
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          :style="{
      maxWidth: '750px',
    }"
      >
        <n-form-item
            label="头像"
            path="account"
        >
          <div class="avatar-wrapper">
            <div
                class="avatar"
                :class="{ 'avatar-touch': touched, 'avatar-end': uploaded }"
                @mouseenter="avatarTouchStart"
            >
              <img :src="formValue.avatar" />
            </div>
            <div class="flex items-center justify-center camera-layer" @click="uploadAvatar">
              <n-icon size="40" color="#ffffff">
                <CameraOutline />
              </n-icon>
            </div>
          </div>
        </n-form-item>
        <n-form-item
            label="邀请码"
            path="invitation"
        >
          <n-input
              v-model:value="formValue.invitation"
              placeholder="用户名"
              disabled
          />
        </n-form-item>
        <n-form-item
            label="用户名"
            path="name"
        >
          <n-input
              v-model:value="formValue.name"
              placeholder="用户名"
          />
        </n-form-item>
        <n-form-item
            label="密码"
            path="password"
        >
          <n-input
              v-model:value="formValue.password"
              placeholder="密码"
          />
        </n-form-item>
        <n-form-item
            label="时区"
            path="timezone"
        >
          <n-select v-model:value="formValue.timezone" :options="timezoneOptions" filterable clearable/>
<!--          {{timezoneOptions}}-->
        </n-form-item>
        <n-form-item
            label="回忆录的轮播图"
            path="carouselImg"
        >
          <PicShowList v-model="picShowListModel"></PicShowList>
        </n-form-item>
        <template v-if="formValue.picList">
          <n-form-item
              label="所有邀请码"
              path="invitations"
          >
            <n-space vertical>
              <template v-for="(inviation,index) in formValue.invitationList">
                <n-text>{{inviation}}</n-text>
              </template>
            </n-space>

          </n-form-item>
        </template>
        <n-form-item>
          <n-button
              attr-type="button"
              @click="handleValidateClick"
          >
            修改
          </n-button>
        </n-form-item>
      </n-form>
    </div>
  </n-card>
</template>
<script setup lang="ts">

import { NFormItem, useMessage } from "naive-ui";
import type { FormInst } from "naive-ui";
import {ref, computed, watch, reactive, onMounted} from "vue";
import useUserStore from "@/store/modules/user";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import {UseConstsStore} from "@/store/modules/consts";
import {UserInfo} from "@/views/model/model";
import {CameraOutline} from "@vicons/ionicons5";
import PicShowList from "@/views/taskoperation/tasklog/common/PicShowList.vue";

const message = useMessage();
const userStore = useUserStore()
const useSurfaceSetting = UseSurfaceSettingStore()
const useConsts = UseConstsStore()

const timezoneOptions = Intl.supportedValuesOf('timeZone').map((s:any)=>{
  return {label:s,value:s}
})
const formValue = ref<UserInfo>(UserInfo.getNewUserInfo());
const oldValue = ref<UserInfo>(UserInfo.getNewUserInfo());
onMounted(async ()=> {
  formValue.value = await userStore.getUserInfo()
  oldValue.value = await userStore.getUserInfo()
  picShowListModel.picList = formValue.value.picList
})

// 轮播图文件
const picShowListModel = reactive({
  toRemovePicList: new Array<string>(),
  picList: new Array<string>(),
  toEdit: true,
});

const touched = ref(false)
const uploaded = ref(false)
const avatarTouchStart = () => {
  touched.value = true
}
const uploadAvatar = () => {
  uploaded.value = true
  setTimeout(() => {
    touched.value = false
    uploaded.value = false
  }, 1000)
}

// 限制规则
const formRef = ref<FormInst | null>(null);
const rules = {
  password: {
    required: true,
    message: "请输入密码",
    trigger: ["input"],
  },
  name: {
    required: true,
    message: "请输入昵称",
    trigger: ["input"],
  },
  timezone: {
    required: true,
    message: "请选择时区",
    trigger: ["change"],
  },
};

// 添加逻辑
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault();
  formRef.value?.validate(async errors => {
    if (!errors) {
      formValue.value.picList = picShowListModel.picList
      const msg = await userStore.saveUserInfo(formValue.value)
      if(msg) message.info(msg)
    } else {
      console.log("errors", formRef);
      message.error("不符合要求");
    }
  });
};
</script>
<style lang="scss" scoped>
.el-tag--dark + .el-tag--dark {
  margin-left: 10px;
  margin-top: 10px;
}
.box-wrapper {
  .personal-box {
    width: 30%;
    .info-wrapper {
      text-align: center;
      .avatar-wrapper {
        display: inline-block;
        width: 6rem;
        height: 6rem;
        margin-top: 20px;
        position: relative;
        .avatar {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          transform-origin: bottom;
          transform: rotate(0deg);
          z-index: 1;
          transition: all 0.5s ease-in-out;
          & > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid rgb(245, 241, 7);
          }
        }
        .avatar-touch {
          transform: rotate(180deg);
        }
        .avatar-end {
          transform: rotate(0deg);
        }
        .camera-layer {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 50%;
        }
      }
      .des-wrapper {
        width: 70%;
        margin: 0 auto;
        font-size: 14px;
        padding: 15px;
      }
      .text-wrapper {
        font-size: 0.8rem;
        margin-top: 10px;
        width: 50%;
        margin: 0 auto;
        .label {
          display: inline-block;
          width: 40%;
          text-align: right;
        }
        .value {
          display: inline-block;
          width: 60%;
          text-align: left;
        }
      }
      .text-wrapper + .text-wrapper {
        margin-top: 15px;
      }
    }
  }
  .message-wrapper {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 10px;
    .notify {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .message-title {
      font-size: 1rem;
    }
    .content {
      font-size: 0.8rem;
      margin-top: 10px;
      line-height: 1rem;
    }
  }
  .message-wrapper + .message-wrapper {
    margin-top: 10px;
  }
  .wating-box {
    width: 30%;
    .wating-item {
      padding: 10px;
      border-bottom: 1px solid #f5f5f5;
    }
  }
}
</style>